<template>
  <el-container>
    <el-header height="80px">
      <div>
        <search></search>
      </div>
    </el-header>
    <el-main>
      <el-container>
        <el-aside width="340px" style="height: 660px;margin-left:220px;">
          <div class="demo-basic--circle">
            <el-avatar :size="90" :src="circleUrl"></el-avatar>
          </div>
          <div class="block" style="margin-left: 0px">
            <span>{{ userfile.username }}</span>
          </div>
          <el-card
            class="box-card1"
            shadow="always"
            style="margin-left: 20px; margin-top: 8px; margin-bottom: 16px"
          >
            <el-form style="margin-top: 10px">
              <el-form-item label="性别" label-width="75px">
                <el-col :span="20">
                  <el-input v-model="userfile.sex" disabled> </el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="年龄" label-width="75px">
                <el-col :span="20">
                  <el-input v-model="userfile.age" type="text" disabled></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="政治面貌" label-width="75px">
                <el-col :span="20">
                  <el-input v-model="userfile.politics" type="text" disabled> </el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="职业" label-width="75px">
                <el-col :span="20">
                  <el-input
                    v-model="userfile.occupation"
                    type="text"
                    disabled
                  ></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="婚姻状况" label-width="75px">
                <el-col :span="20">
                  <el-input v-model="userfile.marriage" type="text" disabled></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="国籍" label-width="75px">
                <el-col :span="20">
                  <el-input v-model="userfile.nation" type="text" disabled></el-input>
                </el-col>
              </el-form-item>
            </el-form>
          </el-card>
        </el-aside>
        <el-main>
          <el-card class="box-card2">
            <div slot="header" class="clearfix">
              <span style="float: left"><b>用户特征</b></span>
            </div>
            <!-- 用户特征图表 -->

            <div class="echarts" style="margin: 0 20px">
              <div id="mychart_total" style="height: 530px;"></div>
            </div>
          </el-card>
        </el-main>
      </el-container>
    </el-main>
    <el-footer height="580px" v-if="showflag">
      <el-card class="box-card3" shadow="always">
        <div slot="header" class="clearfix">
          <span style="float: left"><b>个人画像</b></span>
        </div>
        <el-row :gutter="18">
          <el-col :span="12">
            <div class="echarts">
              <div id="mychart_CC" style="width: 27vw; height: 45vh"></div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="echarts">
              <div id="mychart_S" style="width: 27vw; height: 45vh"></div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="echarts">
              <div id="mychart_3" style="width: 27vw; height: 45vh"></div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="echarts">
              <div id="mychart_4" style="width: 27vw; height: 45vh"></div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="echarts">
              <div id="mychart_5" style="width: 27vw; height: 45vh"></div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="echarts">
              <div id="mychart_6" style="width: 27vw; height: 45vh"></div>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </el-footer>
  </el-container>
</template>

<script>
import userutil from "../../utils/userutil";
import search from "../../components/search.vue";
export default {
  components: { search },

  data() {
    return {
      circleUrl:"http://api.btstu.cn/sjtx/api.php",
      showflag: true,
      userfile:{
        username: "123123",
        sex: "女",
        age: "21",
        politics: "群众",
        occupation: "学生",
        marriage: "未婚",
        nation: "中国",
      },
      labelData: [
        {
          name: "",
          value: 1,
        },
        {
          name: "孙笑川",
          value: "昵称",
        },
        {
          name: "男",
          value: "性别",
        },
        {
          name: 21,
          value: "年龄",
        },
        {
          name: "学生",
          value: "职业",
        },
        {
          name: "sxc@sxc.sxc",
          value: "邮箱",
        },
        {
          name: "群众",
          value: "政治面貌",
        },
        {
          name: "中国大陆",
          value: "国籍",
        },
        {
          name: "辣条",
          value: "最爱商品",
        },
        {
          name: "高消费能力",
          value: "消费能力",
        },
        {
          name: "iOS",
          value: "设备类型",
        },
        {
          name: "中等换货率",
          value: "换货率",
        },
      ],
      prefer_type1: [
        { value: 66, name: "带带大师兄" },
        { value: 54, name: "带带大师兄1" },
        { value: 49, name: "带带大师兄2" },
        { value: 41, name: "带带大师兄3" },
        { value: 36, name: "带带大师兄4" },
        { value: 28, name: "带带大师兄5" },
        { value: 26, name: "带带大师兄6" },
        { value: 20, name: "带带大师兄7" },
        { value: 18, name: "带带大师兄8" },
        { value: 12, name: "带带大师兄9" },
      ],
      prefer_goods: [
        { value: 1048, name: "123" },
        { value: 735, name: "1234" },
        { value: 2650, name: "1236" },
        { value: 484, name: "1235" },
        { value: 300, name: "1232" },
        { value: 150, name: "12322" },
        { value: 50, name: "123222" },
        { value: 999, name: "123221" },
        { value: 210, name: "123121" },
        { value: 100, name: "1235" },
      ],
    };
  },
  created() {},
  mounted() {
    var that = this;
    setTimeout(() => {
      that.getchart();
    }, 200);
  },
  methods: {
    getchart() {
      let that = this;
      //图表数据部分
      var option_total = {
        tooltip: {
          show: true,
        },
        series: [
          {
            name: "个人标签",
            type: "wordCloud",
            size: ["100%", "100%"],
            textRotation: [0, 45, 90, -45],
            textPadding: 0,
            sizeRange: [18, 120],
            data: that.labelData,
            textStyle: {
              value: [1000, 20000, 30000],
              color: function () {
                return (
                  "rgb(" +
                  [
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160),
                  ].join(",") +
                  ")"
                );
              },
            },
          },
        ],
      };
      var option_CC = {
        title: {
          text: "最喜爱品类",
        },
        legend: {
          top: "bottom",
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "面积模式",
            type: "pie",
            radius: [30, 100],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },
            data: that.prefer_type1,
          },
        ],
      };
      var option_S = {
        title: {
          text: "最喜爱商品",
        },
        tooltip: {
          trigger: "item",
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        legend: {
          top: "bottom",
          left: "center",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: this.prefer_goods,
          },
        ],
      };

      let newPromise = new Promise((resolve) => {
        resolve();
      });
      //然后异步执行echarts的初始化函数
      newPromise.then(() => {
        //	此dom为echarts图表展示dom

        var mychart_total = this.$echarts.init(
          document.getElementById("mychart_total")
        );
        mychart_total.setOption(option_total);

        var mychart_CC = this.$echarts.init(
          document.getElementById("mychart_CC")
        );
        mychart_CC.setOption(option_CC);

        var mychart_S = this.$echarts.init(
          document.getElementById("mychart_S")
        );
        mychart_S.setOption(option_S);

        var mychart3 = this.$echarts.init(document.getElementById("mychart_3"));
        mychart3.setOption(option_CC);

        var mychart4 = this.$echarts.init(document.getElementById("mychart_4"));
        mychart4.setOption(option_S);

        var mychart5 = this.$echarts.init(document.getElementById("mychart_5"));
        mychart5.setOption(option_S);
      });
    },
    createRandomItemStyle() {
      return {
        color:
          "rgb(" +
          [
            Math.round(Math.random() * 160),
            Math.round(Math.random() * 160),
            Math.round(Math.random() * 160),
          ].join(",") +
          ")",
      };
    },
  },
};
</script>

<style scoped>
/* .el-container {
  background-color: #e9eef3;
} */
.el-header {
  text-align: center;
  background-color: #b3c0d1;
}
.el-footer {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  height:auto !important;
}
.el-aside {
  line-height: 44px;
  text-align: center;
  background-color: #d3dce6;
  margin-left: 70px;
  /* padding-left: 60px; */
  margin-top: 20px;
  border-radius: 10px;
}
.el-main {
  text-align: center;
  background-color: #e9eef3;
  padding: 0px;
}

.demo-basic--circle {
  margin-top: 30px;
}
.block {
  margin-left: 25px;
  font-weight: bold;
}
.text {
  font-size: 14px;
}
.item {
  margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card1 {
  width: 300px;
  border-radius: 20px;
  text-align: center;
}
.box-card2 {
  width: 800px;
  height: 660px;
  border-radius: 20px;
  /* margin-left: 20px;
  margin-top: 15px;
  margin-bottom: 15px; */
  margin: 15px auto;
  margin-right: 220px;
}
.box-card3 {
  width: 1180px;
  border-radius: 20px;
  /* margin-top: 15px;
  margin-bottom: 15px; */
  margin: 15px auto;
}
.echarts {
  margin: 15px 2px;
  padding: 20px 20px;
  background-color: #e9eef3;
  border-radius: 20px;
}
</style>

